<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试表单校验</title>
    <script src="js/common.js"></script>
    <style>
        span{
            color: red;
            font-size: 10px;
        }
    </style>
</head>
<body>
<h1>jd登录</h1>
<form action="test-js-11.html" method="post" onsubmit="return checkForm()">
    <p>用户名<input type="text" id="username" name="username"onblur="checkUsername(this)" onfocus="clearMsg()" >
        <span id="msg-user"></span>
    </p>
    <p>密 &nbsp;码<input type="password" id="password" name="password" onblur="checkPassword(this)" onfocus="clearMsg()">
        <span id="msg-pwd"></span>
    </p>
    <p><input type="submit" value="登录"></p>
</form>
<script>
    function checkUsername (obj){
        if (!obj.value){
            $("msg-user").innerText="*用户名不能为空";
            return false;
        }
        var pattern = /^[a-z0-9_]{3,16}$/;
        let flag = pattern.test(obj.value);
        return true;
    }
    function checkPassword (obj){
        if (!obj.value){
            $("msg-pwd").innerText="*密码不能为空";
            return false;
        }
        return true;
    }

    function checkForm(){
        let flag =true;
        if (!checkUsername ($("username"))){
            flag=false;
        }
        if (!checkPassword ($("password"))){
            flag=false;
        }
        return flag;
    }
    function clearMsg(){
        $("msg-user").innerText="";
        $("msg-pwd").innerText="";
    }


</script>
</body>
</html>